<template>
  <view class="content-img">
    <eui-navbar title="采购地选择" color="#333" rightIcon=""/>
    <eui-search-bar focus="true" v-model="searchValue" @confirm="selectPlNo" radius="100"
                    placeholder="请输入编码/名称">
    </eui-search-bar>
  </view>
  <view class="main-view">
    <view class="main-view-bg">
      <scroll-view scroll-y="true" lower-threshold='88' @refresherrefresh="onRefresh" @scrolltolower="templateLower"
                   :refresher-enabled='true' :refresher-triggered="triggered"
                   :style="{width:scrollWidth,height:scrollHeight}">
        <view class="padding-left-28 font-size-28 flex flex-direction-column" v-for="(item,index) in dataList"
              :key="index" @click="setSelBackItem(item)"
              :class="item.c_checked && IsMult === '否'?'store-checked':''">
          <view class="sroll-store-list flex">
            <view class="flex align-items-center margin-right-10" v-if="IsMult === '是'">
              <checkbox value="cb" :checked="item.c_checked" @click.stop="setSelBackItem(item)"
                        style="transform:scale(0.7)"/>
            </view>
            <view>
              <view>[{{ item.c_no }}]{{ item.c_name }}</view>
              <view class="flex margin-top-20 font-size-24">
                <view class="flex-1"><span class="color-888">类型 </span><span
                    v-if="item.c_type">{{ item.c_type }}</span></view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
      <view class="user-footer flex-1 flex" v-if="IsMult==='是'">
        <!-- <eui-button type="primary" title="确定" @click="BackMultParm" singleTag="primary_主按钮" /> -->
        <view class="flex-1 flex" style="padding-right: 7.5px;" @click="CancelCondition">
          <view class="flex-1 flex justify-content-center align-items-center bottom-bg"
                style="border: solid 1px rgba(136, 136, 136, 1);font-size: 15px;">取消
          </view>
        </view>
        <view class="flex-1 flex justify-content-center align-items-center" style="padding-left: 7.5px;"
              @click="BackMultParm">
          <view class="flex-1 flex justify-content-center align-items-center bottom-bg"
                style="background: linear-gradient(135deg, rgba(2, 183, 230, 1), rgba(54, 169, 243, 1));color: #fff;font-size: 15px;">
            确认
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup type="ts">
import {ref} from 'vue';
import {onLoad} from '@dcloudio/uni-app';
import service from '../../../../common/service';
import Enjoy from '../../../../common/enjoy';
import {useMainStore} from '@/store/modules/store';
import {useLoginStore} from '@/store/modules/useLoginStore';
import useService from '@/hooks/useService';

const mainStore = useMainStore();
const LoginStore = useLoginStore();
const bcService = useService({ prefix: "bcApi" });

const searchValue = ref('');
const dataPage = ref({
  CurrentPage: 1, //当前页码
  PageCount: 0,//总共多少页
  PageSize: 20,//一页多少条
  RowsCount: 0,//总共多少条
});
const IsMult = ref('否');
const SelectedItems = ref("");
const triggered = ref(false);
const WhereList = ref([]);
const dataList = ref([]);
const scrollWidth = ref(uni.getSystemInfoSync().windowWidth - 20 + 'px');
const scrollHeight = ref(uni.getSystemInfoSync().windowHeight - 150 + 'px');

const selectPlNo = () => {
  dataPage.value.CurrentPage = 1;
  dataList.value = [];
  getPlNoList();
}
const setSelBackItem = e => {
  if (IsMult.value === '否') {
    try {
      let pages = getCurrentPages(); //获取所有页面栈实例列表
      let prevPage = pages[pages.length - 2]; //上一页页面实例
      prevPage.$vm.$.exposed.SelectionChanged('plno', e); //执行函数也是同理
      uni.navigateBack({ //uni.navigateTo跳转的返回，默认1为返回上一级
        delta: 1
      });
    } catch (e) {
      console.log(e);
    }
  } else {
    e.c_checked = !e.c_checked;
  }
}
const CancelCondition = () => {
  uni.navigateBack({
    delta: 1
  });
}
// 多选情况下处理选中的数据以及返回处理
const BackMultParm = () => {
  const selectedList = dataList.value.filter(item => item.c_checked);
  if (selectedList.length == 0) {
    uni.showToast({
      duration: 3500,
      icon: 'none',
      title: '请先选择采购地!',
    });
    return false;
  }
  try {
    let pages = getCurrentPages(); //获取所有页面栈实例列表
    let prevPage = pages[pages.length - 2]; //上一页页面实例
    prevPage.$vm.$.exposed.SelectionChanged('plno', selectedList); //执行函数也是同理
    uni.navigateBack({ //uni.navigateTo跳转的返回，默认1为返回上一级
      delta: 1
    });
  } catch (e) {
    console.log(e);
  }
}
// 下拉刷新
const onRefresh = () => {
  if (triggered.value) {
    return false;
  }
  triggered.value = true;
  dataPage.value.CurrentPage = 1;
  dataList.value = [];
  getPlNoList();
  setTimeout(() => {
    triggered.value = false;
  }, 1000)
}
// 加载更多
const templateLower = () => {
  if (dataPage.value.CurrentPage < dataPage.value.PageCount) {
    dataPage.value.CurrentPage += 1;
    getPlNoList();
  }
}
const getPlNoList = async () => {
  service.enjoyShowLoading('正在加载...');
  let searchWhereList = [];
  if (searchValue.value) {
    searchWhereList = [
      {
        c_col: 'c_no',
        c_oper: "相似",
        c_value: searchValue.value,
        c_logic: "或者",
      },
      {
        c_col: 'c_name',
        c_oper: "相似",
        c_value: searchValue.value,
        c_logic: "而且",
      }
    ];
  }
  const req = {
    IsNotPage: false,
    PageSize: dataPage.value.PageSize,
    CurrentPage: dataPage.value.CurrentPage,
    WhereList: searchWhereList.length > 0 ? searchWhereList : null,
  };
  let res = await bcService.request('生鲜采购地维护', 'EnjoyQueryList', req);
  if (res) {
    dataPage.value.RowsCount = res.RowsCount;
    dataPage.value.PageCount = res.PageCount;
    const list = res.ReturnObject;
    if (list && list.length > 0) {
      let selD = [];
      if (SelectedItems.value) {
        selD = SelectedItems.value.split(',');
      }
      for (let i = 0; i < list.length; i++) {
        if (list[i].c_name != 'Group') {
          if (selD.length > 0) {
            let cN = 0;
            for (let bb = 0; bb < selD.length; bb++) {
              if (list[i].c_id == selD[bb]) {
                cN += 1;
              }
            }
            dataList.value.push({
              ...list[i],
              c_checked: cN > 0
            });
          } else {
            dataList.value.push({
              ...list[i],
              c_checked: false
            });
          }
        }
      }
    }
  }

  service.enjoyHideLoading();
}
onLoad(option => {
  if (option && option.IsMult) {
    IsMult.value = option.IsMult;
    setTimeout(function () {
      uni.getSystemInfo({
        success: function (res) {
          const userInfoPage = uni.createSelectorQuery().select(".content-img");
          userInfoPage.boundingClientRect(function (data) {
            if (option.IsMult == '否') {
              scrollHeight.value = (res.windowHeight - data.height - 40) + 'px';
            } else {
              scrollHeight.value = (res.windowHeight - data.height - 85) + 'px';
            }
          }).exec()
        }
      });
    }, 500);
  }
  if (option && option.SelectedItems) {
    SelectedItems.value = option.SelectedItems;
  }
  // if(option&&option.WhereList){
  // 	WhereList.value = JSON.parse(option.WhereList);
  // }
  getPlNoList();
})
</script>

<style lang="scss" scoped>
@import '../../../../main.scss';

.flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}

.flex-direction-column {
  flex-direction: column !important;
}

.margin-top-20 {
  margin-top: 20rpx;
}

.font-size-24 {
  font-size: 24rpx;
}

.padding-left-28 {
  padding-left: 28rpx;
}

.content-img {
  background-color: #FFFFFF;
  background-repeat: no-repeat;
  width: 100%;
}

.color-888 {
  color: rgba(136, 136, 136, 1);
}

.main-view {
  flex: 1;
  flex-direction: column;
  padding: 20rpx;
  background-color: #f2f2f2;
}

.main-view-bg {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 20rpx 0;
}

.sroll-store-list {
  padding: 20rpx 28rpx 20rpx 0;
  border-bottom: solid 1px rgba(238, 238, 238, 1);
  line-height: 1;
}

.font-size-28 {
  font-size: 28rpx;
}

.store-checked {
  background-color: rgba(249, 250, 252, 1) !important;
}

.user-footer {
  position: fixed;
  z-index: 9;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10rpx 28rpx;
}

.margin-right-10 {
  margin-right: 10rpx;
}

.justify-content-center {
  justify-content: center;
}

.bottom-bg {
  height: 40px;
  border-radius: 20px;
}

.align-items-center {
  align-items: center;
}
</style>
